<template>
  <div class="header">
    <div class="top">
      <ul>
        <li @click="router.push({path:'/'})">社区功能分类1</li>
        <li>社区功能分类2</li>
        <li>社区功能分类3</li>
        <li>社区功能分类4</li>
      </ul>

      <div class="user">
        <div>您好!{{ userInfo&&userInfo.name }}</div>
        <el-button style="margin-left:20px" @click="logout">退出</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import router from '../../router'
let userInfo = ref()
onMounted(() => {
  let info = sessionStorage.getItem('userInfo')
  if (info) {
    userInfo.value = JSON.parse(info)
  }
  console.log(info)
})
const logout = ()=>{
    sessionStorage.removeItem('userInfo')
    router.push({path:'/login'})
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 250px;
  background-image: url('./header.jpg');
  background-size: 100% 100%;
  .top {
    width: 100%;
    height: 50px;
    background: #152546;
    opacity: 0.8;
    display: flex;
    justify-content: space-around;
    align-items: center;
.user{
    display: flex;
    color: #fff;
    align-items: center;
}
    ul {
      padding: 10px 0;
      display: flex;
      width: 60%;
      justify-content: space-between;
     
      li {
        list-style: none;
        color: #fff;
        cursor: pointer;
        &:active {
          color: #7cfff6;
        }
      }
    }
  }
}
</style>